<script setup lang="ts">
import Highlight from '@/components/Highlight/src/Highlight.vue';
import { ElCheckbox } from 'element-plus';
import { computed, defineModel, type PropType } from 'vue';
import type { LinkItem } from '../types';

defineOptions({
  name: 'IAgree'
});
const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  link: {
    type: Array as PropType<LinkItem[]>,
    default: undefined
  }
});

const modelValue = defineModel<boolean>({ default: false });

const highlightKeys = computed(() => props.link?.map((item) => item.text) ?? []);
const handleHighlightClick = (key: string) => {
  console.log('点击了', key);
};
</script>

<template>
  <div class="flex-center">
    <ElCheckbox v-model="modelValue" class="mr-0px!"></ElCheckbox>
    <Highlight class="ml-10px" :keys="highlightKeys" @click="handleHighlightClick">
      {{ props.text }}
    </Highlight>
  </div>
</template>
